<template>
	<div class="foSi14" style="padding: 20px;">
		<div class="wid100 dis disAl disJuB">
			<div class="dis"></div>
			<div class="dis disAl hei60" style="padding-top: 20px;">
				<div class="dis disAl hei34 borRad20 coFFF cuPo mar-right10" style="background: #6b7cdd;padding: 0 10px;"
					@click="clear()">清空当前课表</div>
				<div class="dis disAl hei34 borRad20 coFFF cuPo mar-right10" style="background: #6b7cdd;padding: 0 10px;"
					@click="saveImg('surface')">保存当前课表为图片</div>
			</div>
		</div>
		<div class="mar-top30 mar-bott25 dis disAl disJuB poRel">
			<div class="dis disAl">
				<div class="change-skin mar-right10" :class="skin === 1?'curr':''" effect="dark" title="切换课表样式">
					<span @click.stop="skinClick(0)" />
					<span @click.stop="skinClick(1)" />
				</div>
			</div>
			<div class="hei34 dis disAl disJuC">
				<svg-icon icon-class="arrow-left" class="mar0 cuPo" style="width: 29px;height: 29px;"
					@click.stop="timeChange(1)" />
				<div class="mar-left15 mar-right15 foSi18 xuanze">{{ oneTime.time }} 至 {{ sevenTime.time }}</div>
				<svg-icon icon-class="arrow-right" class="mar0 cuPo" style="width: 29px;height: 29px;"
					@click.stop="timeChange(2)" />
			</div>
			<div class="dis disAl hei34 borRad20 coFFF cuPo" style="background: #6b7cdd;padding: 0 24px;"
				@click.stop="timeChange(0)">返回本周</div>
		</div>
		<div class="wid100 xuanze">
			<table id="surface" width="100%" class="syllabus-content-data"
				:class="skin === 1?'syllabus-content-data2':''">
				<thead>
					<tr>
						<th width="66">
							<div>DAY</div>
						</th>
						<th v-for="(item, index) in timeList" :key="index">
							<div class="syllabus-thead-cell hei100">
								<div v-if="todayTime > item.date" class="course-add">
									<img src="../../icons/png/syllaubs-dis-plus.png" class="wh100">
								</div>
								<div v-else class="course-add cuPo" @click.stop="surfaceAdd(item)" title="点击添加排课">
									<img src="../../icons/png/syllaubs-plus.png" class="wh100">
								</div>
								<div class="foSi17 fowe800 hei20 dis disAl">{{ item.name }}</div>
								<div style="color: #4f4f4f;">{{ item.time }}</div>
							</div>
						</th>
					</tr>
				</thead>
				<tbody v-if="list">
					<tr v-for="(item,index) in list" :key="index">
						<td class="time-group-text-box">
							<div class="time-group-text textCen fowe800">{{ item.time[0] }}</div>
						</td>
						<td v-for="(item1,index1) in item.course" :key="index1"
							:style="skin === 1?'background: #'+item1.colors+';color: #fff;':''">
							<div class="syllabus-list-course">
								<div v-if="JSON.stringify(item1) !== '[]'" class="active"
									@click.stop="editClick(item1,index1)">
									<div v-if="skin !== 1" class="course-color"
										:style="'background: #'+item1.colors+';'">
										<span class="arrow" />
									</div>
									<span v-if="item1.schedule_type === '4'" class="quality-badge" />
									<span v-if="item1.is_stop === '1'" class="stop-ribbon">已停课</span>
									<p class="mp0 ">{{ item1.start_time }}~{{ item1.end_time }}</p>
									<p class="mp0 ">{{ item1.name }}</p>
									<p v-if="check.indexOf(5) !== -1" class="mp0 ">{{ item1.coach_name }}</p>
									<p v-if="check.indexOf(4) !== -1" class="mp0 ">{{ item1.classroom }}</p>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div v-if="addVisible || editVisible" class="zhezhao wh100"></div>
		<div v-if="addVisible" class="zhezhaoN dis disAl disJuC wh100">
			<el-scrollbar wrap-class="scrollbar-wrapper poRel borRad10 bacFFF zhezhaoWH" style="width: 962px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">批量排课</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" @click.stop="shuaVisibleClick()"
							style="color: #ACACAC;width: 24px;height: 24px;" />
					</div>
					<div class="mar-top20">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
							<div class="wid100 item-l hei44 mar-bott10 dis disAl">
								<div class="hei100 item-p item-w dis disAl disJuB"
									style="border-right: 2px solid #f2f2f2;">
									<div class="dis disAl">
										<span class="mar-right5" style="color: #FF0000;">*</span>
										<span>班级名称</span>
									</div>
									<el-form-item class="mp0" prop="className">
										<el-select v-model="ruleForm.className" style="width: 140px" filterable
											placeholder="请选择" @change="classNameChange">
											<el-option v-for="(item,index) in classList" :key="index" :label="item.name"
												:value="item.id" />
										</el-select>
									</el-form-item>
								</div>
								<span class="cuPo" style="color: #6b7cdd;"
									@click.stop="tiaozhuan('/course/classPrivateAdd')">还没班级？马上去添加班级</span>
							</div>
							<div class="wid100 item-l hei44 mar-bott10 dis disAl">
								<div class="hei100 item-p item-w dis disAl disJuB"
									style="border-right: 2px solid #f2f2f2;">
									<div class="dis disAl">
										<span class="mar-right5" style="color: #FF0000;">*</span>
										<span>课程</span>
									</div>
									<el-form-item class="mp0" prop="courses">
										<el-select v-model="ruleForm.courses" style="width: 140px" filterable
											placeholder="请选择" @change="coursesChange">
											<el-option v-for="(item,index) in coursesList" :key="index"
												:label="item.name" :value="item.id" />
										</el-select>
									</el-form-item>
								</div>
								<span class="cuPo" style="color: #6b7cdd;"
									@click.stop="tiaozhuan('/course/courseTeamAdd')">还没课程？马上去添加课程</span>
							</div>
							<div class="wid100 item-l hei44 mar-bott10 dis disAl">
								<div class="hei100 item-bor item-p item-w dis disAl disJuB">
									<div class="dis disAl">
										<span class="mar-right5" style="color: #FF0000;">*</span>
										<span>老师</span>
									</div>
									<el-form-item class="mp0" prop="coachs">
										<el-select v-model="ruleForm.coachs" style="width: 140px" placeholder="请选择">
											<el-option v-for="(item,index) in coachsList" :key="index"
												:label="item.name" :value="item.id" />
										</el-select>
									</el-form-item>
								</div>
								<div class="hei100 item-p item-w dis disAl disJuB">
									<div>上课教室</div>
									<el-select v-model="ruleForm.classrooms" @change="ruleForm.relevance = []"
										style="width: 140px" placeholder="请选择">
										<el-option v-for="(item,index) in classroomsList" :key="index"
											:label="item.name" :value="item.id" />
									</el-select>
								</div>
							</div>
							<div v-if="ruleForm.classrooms" class="wid100 item-l mar-bott10 dis item-p">
								<div class="mar-top10" style="width: 248px;">关联教室</div>
								<el-checkbox-group class="mar-bott10" v-model="ruleForm.relevance">
									<el-checkbox v-if="ruleForm.classrooms !== item.id"
										v-for="(item,index) in classroomsList" :key="index" :label="item.id"
										class="mar-top10 mar-right30">{{item.name}}</el-checkbox>
								</el-checkbox-group>
							</div>
							<div class="wid100 item-l hei44 mar-bott10 dis disAl">
								<div class="hei100 item-bor item-p item-w dis disAl disJuB">
									<div class="dis disAl">
										<span class="mar-right5" style="color: #FF0000;">*</span>
										<span>排课日期</span>
									</div>
									<div class="dis disAl">
										<el-date-picker v-model="ruleForm.stateTime" style="width: 140px;" value-format="yyyy-MM-dd"
											type="date" />
										<div style="width: 20px;"></div>
										<el-date-picker v-model="ruleForm.endTime" style="width: 140px;" value-format="yyyy-MM-dd"
											type="date" />
									</div>
								</div>
								<div class="hei100 item-p item-w dis disAl disJuB">
									<div>
										<span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
										<span>上课时间</span>
									</div>
									<div class="dis disAl">
										<div class="mar-right5" v-if="ruleForm.jieshuTime">结束时间:
											{{ruleForm.jieshuTime}}
										</div>
										<el-select v-model="ruleForm.shiTime" @change="shiCheange"
											style="width: 70px;height: 34px;">
											<el-option v-for="(item,index) in shiList" :key="index" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
										<span class="mar-left10 mar-left10">：</span>
										<el-select v-model="ruleForm.fenTime" @change="shiCheange"
											style="width: 70px;height: 34px;">
											<el-option v-for="(item,index) in fenList1" :key="index" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</div>
								</div>
							</div>
							<div class="wid100 item-l hei44 mar-bott10 dis disAl">
								<div class="hei100 item-bor item-p item-w dis disAl disJuB">
									<div class="dis disAl">颜色</div>
									<el-popover v-model="isPopover" popper-class="monitor-yt-popover1"
										placement="bottom" width="220" trigger="click">
										<div class="wid100">
											<div class="coFFF dis disAl"
												style="background: #84878d;height: 24px;padding-left: 10px;">选颜色</div>
											<div class="wid100 dis disAl flwa" style="padding: 11px 5px 5px 11px;">
												<div v-for="(item,index) in colorList" :key="index"
													@click.stop="ruleForm.color = item,isPopover = false"
													class="col cuPo" :style="'background: #'+item+';'">
												</div>
											</div>
										</div>
										<div slot="reference" class="dis disAl hei34 bacFFF cuPo"
											style="border: 1px solid #d9d9d9;">
											<span style="width: 10px;"></span>
											<span style="width: 88px;height: 20px;"
												:style="'background: #'+ruleForm.color+';'"></span>
											<div class="dis disJuC" style="width: 40px;">
												<i class="el-icon-arrow-down"></i>
											</div>
										</div>
									</el-popover>
								</div>
								<div class="hei100 item-p item-w dis disAl disJuB">
									<div class="dis disAl">
										<span class="mar-right5" style="color: #FF0000;">*</span>
										<span>课程时长（分钟）</span>
									</div>
									<el-form-item class="mp0" prop="kcTime">
										<el-input v-model="ruleForm.kcTime" style="width: 140px;" @change="jisuanTime"
											placeholder="请输入课程时长" />
									</el-form-item>
								</div>
							</div>
							<div class="wid100 item-l hei44 dis disAl item-p">
								<div class="dis disAl" style="width: 248px;">
									<span class="mar-right5" style="color: #FF0000;">*</span>
									<span>周循环</span>
								</div>
								<el-checkbox-group v-model="ruleForm.days" :min="1">
									<el-checkbox v-for="(item,index) in daysList" :key="index" :label="item.id"
										class="mar-right30">{{item.name}}</el-checkbox>
								</el-checkbox-group>
							</div>
						</el-form>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF mar-top20" style="padding: 20px 0 40px">
						<div class="mar-right20 que cuPo" @click.stop="submitForm('ruleForm')"
							style="background: #6b7cdd;">保存</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
		<div v-if="editVisible" class="zhezhaoN dis disAl disJuC wh100">
			<el-scrollbar wrap-class="scrollbar-wrapper poRel borRad10 bacFFF zhezhaoWH" style="width: 962px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">课程信息（{{editName.dateName}} {{editDay}}）</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" @click.stop="editVisible = false"
							style="color: #ACACAC;width: 24px;height: 24px;" />
					</div>
					<div v-if="edit === 1">
						<div class="foSi12 titl mar-top20">课程基本信息</div>
						<div class="wid100 item-l hei44 mar-bott10 dis disAl">
							<div class="hei100 item-bor item-p item-w dis disAl disJuB">
								<div>班级名称</div>
								<div>{{editData.class_name}}</div>
							</div>
							<div class="hei100 item-bor item-p item-w dis disAl disJuB">
								<div>课程名称</div>
								<div>{{editData.name}}</div>
							</div>
						</div>
						<div class="wid100 item-l hei44 mar-bott10 dis disAl">
							<div class="hei100 item-bor item-p item-w dis disAl disJuB">
								<div>上课老师</div>
								<div>{{editData.coach_name}}</div>
							</div>
							<div class="hei100 item-bor item-p item-w dis disAl disJuB">
								<div>课程时长（分钟）</div>
								<div>{{editData.long_time}}</div>
							</div>
						</div>
						<div class="foSi12 titl mar-top20">排课信息</div>
						<div class="wid100 item-l hei44 mar-bott10 dis disAl">
							<div class="hei100 item-bor item-p item-w dis disAl disJuB">
								<div>上课教室</div>
								<div>{{editData.classroom_name?editData.classroom_name:"未知教室"}}</div>
							</div>
							<div class="hei100 item-bor item-p item-w dis disAl disJuB">
								<div>上课时间</div>
								<div>{{editData.class_hour+':'+editData.class_min}}</div>
							</div>
						</div>
						<div class="wid100 item-l hei44 mar-bott10 dis disAl">
							<div class="hei100 item-bor item-p item-w dis disAl disJuB">
								<div>排课日期</div>
								<div>{{editDay}}</div>
							</div>
							<div class="hei100 item-p item-w dis disAl disJuB">
								<div>颜色</div>
								<span style="width: 88px;height: 20px;"
									:style="'background: #'+editData.colors+';'"></span>
							</div>
						</div>
						<div v-if="gouTime(editData.class_time)" class="wid100 dis disAl disJuC foSi14 coFFF"
							style="padding: 20px 0 40px">
							<div class="mar-right20 que cuPo" style="background: #AEAEAE;">编辑</div>
							<div class="mar-right20 que cuPo" style="background: #AEAEAE;">删除</div>
						</div>
						<div v-else class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
							<div class="mar-right20 que cuPo" style="background: #6b7cdd;" @click.stop="editTwo()">编辑
							</div>
							<div class="mar-right20 que cuPo" style="background: #e84577;" @click.stop="getDdel()">删除
							</div>
							<!-- <el-popover popper-class="bot" placement="bottom" width="260" trigger="click">
								<div class="wid100 bacFFF foSi14" styel="border: 1px solid #d9d9d9;">
									<div class="del-list textCen" style="border-bottom: 1px solid #d9d9d9;"
										@click.stop="editVisible = false">仅删除本次课程</div>
									<div class="del-list textCen" @click.stop="editVisible = false">删除本次及以后每周六的这节课</div>
								</div>
								<div slot="reference" class="que cuPo" style="background: #6b7cdd;">删除</div>
							</el-popover> -->
						</div>
					</div>
					<div v-if="edit === 2">
						<div class="mar-top20">
							<el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1">
								<div class="foSi12 titl">课程基本信息</div>
								<div class="wid100 item-l hei44 mar-bott10 dis disAl">
									<div class="hei100 item-bor item-p item-w dis disAl disJuB">
										<div class="dis disAl">
											<span>班级名称</span>
										</div>
										<div>{{ruleForm1.class_name}}</div>
									</div>
									<div class="hei100 item-p item-w dis disAl disJuB">
										<div class="dis disAl">
											<span class="mar-right5" style="color: #FF0000;">*</span>
											<span>课程名称</span>
										</div>
										<el-form-item class="mp0" prop="courses">
											<el-select v-model="ruleForm1.name" style="width: 140px" filterable
												placeholder="请选择" @change="coursesChange1">
												<el-option v-for="(item,index) in coursesList1" :key="index"
													:label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
								</div>
								<div class="wid100 item-l hei44 mar-bott10 dis disAl">
									<div class="hei100 item-bor item-p item-w dis disAl disJuB">
										<div class="dis disAl">
											<span class="mar-right5" style="color: #FF0000;">*</span>
											<span>老师</span>
										</div>
										<el-form-item class="mp0" prop="coachs">
											<el-select v-model="ruleForm1.coach_name" style="width: 140px"
												placeholder="请选择">
												<el-option v-for="(item,index) in coachsList" :key="index"
													:label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
									<div class="hei100 item-p item-w dis disAl disJuB">
										<div>上课教室</div>
										<el-select v-model="ruleForm1.classrooms" @change="ruleForm1.relevance = []"
											style="width: 140px" placeholder="请选择">
											<el-option v-for="(item,index) in classroomsList" :key="index"
												:label="item.name" :value="item.id" />
										</el-select>
									</div>
								</div>
								<div class="wid100 item-l hei44 mar-bott10 dis disAl">
									<div class="hei100 item-p item-bor item-w dis disAl disJuB">
										<div>排课日期</div>
										<div>{{ editName.dateName }}</div>
									</div>
									<div class="hei100 item-p item-w dis disAl disJuB">
										<div>
											<span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
											<span>上课时间</span>
										</div>
										<div class="dis disAl">
											<el-select v-model="ruleForm1.class_hour" style="width: 70px;height: 34px;">
												<el-option v-for="(item,index) in shiList" :key="index"
													:label="item.label" :value="item.value">
												</el-option>
											</el-select>
											<span class="mar-left10 mar-left10">：</span>
											<el-select v-model="ruleForm1.class_min" style="width: 70px;height: 34px;">
												<el-option v-for="(item,index) in fenList1" :key="index"
													:label="item.label" :value="item.value">
												</el-option>
											</el-select>
										</div>
									</div>
								</div>
								<div class="wid100 item-l hei44 mar-bott10 dis disAl">
									<div class="hei100 item-bor item-p item-w dis disAl disJuB">
										<div class="dis disAl">颜色</div>
										<el-popover v-model="ruleForm1.colors" popper-class="monitor-yt-popover1"
											placement="bottom" width="220" trigger="click">
											<div class="wid100">
												<div class="coFFF dis disAl"
													style="background: #84878d;height: 24px;padding-left: 10px;">选颜色
												</div>
												<div class="wid100 dis disAl flwa" style="padding: 11px 5px 5px 11px;">
													<div v-for="(item,index) in colorList" :key="index"
														@click.stop="ruleForm1.colors = isPopover1 = false"
														class="col cuPo" :style="'background: #'+item+';'">
													</div>
												</div>
											</div>
											<div slot="reference" class="dis disAl hei34 bacFFF cuPo"
												style="border: 1px solid #d9d9d9;">
												<span style="width: 10px;"></span>
												<span style="width: 88px;height: 20px;"
													:style="'background: #'+ruleForm1.colors+';'"></span>
												<div class="dis disJuC" style="width: 40px;">
													<i class="el-icon-arrow-down"></i>
												</div>
											</div>
										</el-popover>
									</div>
									<div class="hei100 item-p item-w dis disAl disJuB">
										<div class="dis disAl">
											<span class="mar-right5" style="color: #FF0000;">*</span>
											<span>课程时长</span>
										</div>
										<el-form-item class="mp0" prop="kcTime">
											<el-input v-model="ruleForm1.long_time" style="width: 140px;"
												placeholder="请输入课程时长" />
										</el-form-item>
									</div>
								</div>
								<!-- <div class="foSi12 titl mar-top10">更新信息</div>
								<div class="wid100 item-l item-p hei44 mar-bott10 dis disAl">
									<div class="dis disAl cuPo" @click.stop="ruleForm1.update = 1">
										<div class="dis disAl disJuC bacFFF borRad50"
											style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">
											<div v-if="ruleForm1.update === 1" class="borRad50"
												style="width: 6px;height: 6px;background: #6b7cdd;"></div>
										</div>
										<div class="mar-left5">仅更新本次课程</div>
									</div>
									<div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.update = 2">
										<div class="dis disAl disJuC bacFFF borRad50"
											style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">
											<div v-if="ruleForm1.update === 2" class="borRad50"
												style="width: 6px;height: 6px;background: #6b7cdd;"></div>
										</div>
										<div class="mar-left5">更新本次及以后每周六的这节课</div>
									</div>
								</div> -->
							</el-form>
						</div>
						<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
							<div class="mar-right20 que cuPo" @click.stop="submitForm('ruleForm1')"
								style="background: #6b7cdd;">保存</div>
							<div class="que cuPo" style="background: #616b74;" @click.stop="edit = 1">取消</div>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
	import htmlToExcel from '@/utils/htmlToExcel'
	import html2canvas from "html2canvas";
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getCourseshoolList,
		courseshoolAddEdit,
		courseshoolDetails,
		getcourseAll,
		clearCourse,
		copyCourse,
		stopCourse,
		getDdels
	} from '@/api/coures'
	import {
		getVenue,
		getClassroom
	} from '@/api/venue'
	import {
    getListsAll
	} from '@/api/class.js'
	export default {
		name: 'courseSurfaceClass',
		components: {},
		data() {
			const validateTime = (rule, value, callback) => {
				var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
				if (!reg.test(value) || !value || value > 1440 || value === 0) {
					callback(new Error('请输入课程时长(1~1440)'))
				} else {
					callback()
				}
			}
			return {
				copyshow: false,
				addVisible: false,
				editVisible: false,
				edit: 1,
				addTime: null,
				list: null,
				timeIndex: 0,
				oneTime: '',
				sevenTime: '',
				todayTime: '',
				timeList: [],
				skin: 0,
				surface: 1,
				surfaceList: [{
					label: '显示全部课程',
					value: 1
				}, {
					label: '仅显示本周课程',
					value: 2
				}],
				check: [1, 2, 3, 4, 5, 6],
				shiList: [],
				fenList: [],
				fenList1: [],
				day: 1,
				shi: 0,
				fen: 0,
				ruleForm: {
          classId:0,
          className: null,
					courses: null,
					coachs: null,
					kcTime: null,
					classrooms: null,
					jieshuTime: null,
					shiTime: 8,
					fenTime: 0,
					stateTime: '',
					endTime: '',
					relevance: [],
					color: 'd19fc9',
					days: [1,2,3,4,5,6,7],
				},
				rules: {
					className: [{
						required: true,
						trigger: 'change',
						message: '请选择班级',
					}],
					courses: [{
						required: true,
						trigger: 'change',
						message: '请选择课程',
					}],
					coachs: [{
						required: true,
						trigger: 'change',
						message: '请选择老师',
					}],
					kcTime: [{
						required: true,
						trigger: 'blur',
						validator: validateTime
					}]
				},
				ruleForm1: {
          classId:0,
					className: null,
					courses: null,
					coachs: null,
					kcTime: null,
					classrooms: null,
					jieshuTime: null,
					shiTime: 8,
					fenTime: 0,
					stateTime: new Date(),
					endTime: new Date(),
					relevance: [],
					colors: 'd19fc9',
					days: [1,2,3,4,5,6,7],
					update: 1
				},
				rules1: {
					// coachs: [{
					// 	required: true,
					// 	trigger: 'change',
					// 	message: '请选择老师',
					// }],
					// kcTime: [{
					// 	required: true,
					// 	trigger: 'blur',
					// 	validator: validateTime
					// }]
				},
				daysList: [
					{"id": 1,"name": "周一"},{"id": 2,"name": "周二"},{"id": 3,"name": "周三"},
					{"id": 4,"name": "周四"},{"id": 5,"name": "周五"},{"id": 6,"name": "周六"},{"id": 7,"name": "周日"}
				],
				classList: [],
				coachsList: [],
				coursesList: [],
				coursesList1: [],
				classroomsList: [],
				colorList: [
					"FBB0A1", "FEFF99", "BCFD84", "95E2F5", "928FD9",
					"47D95E", "E5D0C4", "9c4b4b", "db6a51", "f5c856",
					"75c090", "ed707a", "b0649a", "d19fc9", "8b9599",
					"9c8088", "a6c399", "5b6fc1", "9583b0", "b0a763",
					"da8e6d", "b07187", "F8F6EF", "EBDBC9", "DAE1EB",
					"EBF4F7", "E7DAD1", "F7F1F1", "F3D5D7", "DDCCCD",
					"F4F0E5", "EDA7A6", "D0CAB7", "EDE9E8", "E6CEB7",
					"F4D7B7", "F2E8D5", "FBF0C8", "ABB5C8", "DCDCDC",
					"FBECE6", "C4C6B8", "EADDE3", "ECF0EF"
				],
				isPopover: false,
				isPopover1: false,
				imageUrl: '',
				editName: '',
				editDay: '',
				editData: null,
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '团课课程表',
				url: '/course/courseSurface',
				pd: true
			}, {
				name: '班课课程表',
				url: '/course/courseSurfaceClass',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			var check = localStorage.getItem('check')
			if (check) {
				var list = check.split(',')
				this.check = list.map(Number)
			}
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 1
			})
			this.timeCreated()
			for (var i = 0; i < 24; i++) {
				this.shiList.push({
					label: i < 10 ? '0' + i : i,
					value: i
				})
			}
			for (var i = 0; i < 60; i++) {
				this.fenList.push({
					label: i < 10 ? '0' + i : i,
					value: i
				})
			}
			for (var i = 0; i < 60; i += 5) {
				this.fenList1.push({
					label: i < 10 ? '0' + i : i,
					value: i
				})
			}
			this.getVen()
			this.classroom()
		},
		methods: {
			gouTime(time) {
				var date = new Date();
				var date1 = new Date(time * 1000);
				return date > date1
			},
			clear() {
				this.$confirm('清空当前课表', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					clearCourse({
						'startday': this.oneTime.time,
						'endday': this.sevenTime.time
					}).then(response => {
						const {
							data
						} = response

						this.$message({
							type: 'success',
							message: '清空成功!'
						});
						this.getList()
					}).catch(error => {
						console.log(error)
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消清空'
					});
				})
			},
			dataURLToBlob(dataurl) {
				//ie 图片转格式
				var arr = dataurl.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
			saveImg(name) {
				// this.$message.error('加急开发中')
				let canvasID = document.querySelector("#surface");
				let a = document.createElement("a");
				html2canvas(canvasID).then(canvas => {
					let dom = document.body.appendChild(canvas);
					dom.style.display = "none";
					a.style.display = "none";
					document.body.removeChild(dom);
					let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
					a.setAttribute("href", URL.createObjectURL(blob));
					a.setAttribute("download", name + ".png");
					document.body.appendChild(a);
					a.click();
					URL.revokeObjectURL(blob);
					document.body.removeChild(a);
				});
			},
			classroom() {
				getClassroom().then(response => {
					const {
						data
					} = response
					this.classroomsList = data
				}).catch(error => {
					console.log(error)
				})
			},
			getVen() {
				getVenue().then(response => {
					const {
						data
					} = response
					this.coachsList = data
				}).catch(error => {
					console.log(error)
				})
			},
      classNameChange(e){
        this.classList.forEach(item => {
          if (e === item.id) {
            this.ruleForm.className = item.name
            this.ruleForm.classId = item.id
          }
        })
      },
			coursesChange(e) {
        this.coursesList.forEach(item => {
          if (e === item.id) {
            this.ruleForm.coursesName = item.name
            this.ruleForm.coachs = item.coach_id
            this.ruleForm.kcTime = item.long_time
            this.ruleForm.color = item.colors
            this.jisuanTime(this.ruleForm.kcTime)
          }
        })
			},
			coursesChange1(e) {
				this.coursesList1.forEach(item => {
					if (e === item.id) {
						this.ruleForm1.coachs = item.coach_id
						this.ruleForm1.kcTime = item.long_time
						this.ruleForm1.color = item.colors
					}
				})
			},
			getCourse(e) {
				getcourseAll({
					'type': 4 // 1团课2精品课3私教课4班课
				}).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.ruleForm.courses = null
					this.coursesList = data
					this.coursesList1 = data
				}).catch(error => {
					console.log(error)
				})
			},
			jisuanTime(time) {
				if (isNaN(time) || time <= 0) {
					this.ruleForm.jieshuTime = null
					this.ruleForm.kcTime = null
				} else {
					console.log(time)
					console.log(time / 60, time % 60)
					var shi = time / 60 + this.ruleForm.shiTime
					var fen = time % 60 + this.ruleForm.fenTime
					console.log(shi, fen)
					if (fen >= 60) {
						shi = fen / 60
						fen = fen % 60
					}
					if (shi >= 24) {
						shi -= 24
					}
					this.ruleForm.jieshuTime = Math.trunc(shi) + '点' + fen + '分'
					console.log(this.ruleForm.jieshuTime)
				}
			},
			shiCheange() {
				if (this.ruleForm.kcTime) {
					this.jisuanTime(this.ruleForm.kcTime)
				}
			},
			tiaozhuan(url) {
				this.$router.push({
					path: url
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var popem = null
						if (formName === 'ruleForm1') {
							// var contact_classroom = this.ruleForm1.relevance.join(",")
							popem = {
								'id': this.editData.id,
                'class_id': this.ruleForm1.class_id,
                'class_name': this.ruleForm1.class_name,
                'course_id': this.ruleForm1.course_id,
                'name': this.ruleForm1.name,
                'type': 4,
                'people_num': 0,
                'long_time': this.ruleForm1.long_time,
                'coach_id': this.ruleForm1.coach_id,
                'colors': this.ruleForm1.colors,
                'classroom_id': this.ruleForm1.classroom_id,
                // 'contact_classroom': contact_classroom,
                'people_setting': this.ruleForm1.people_setting,
                'people_restrict': 1,
                'starts_people': 0,
                'times_setting': 1,
                'reservation_deadline': 0,
                'class_date': this.editName.dateName,
                'class_hour': this.ruleForm1.class_hour,
                'class_min': this.ruleForm1.class_min,
                // 'id': this.editData.id,
              }
						} else {
							var contact_classroom = this.ruleForm.relevance.join(",")
							popem = {
                'class_id': this.ruleForm.classId,
                'class_name': this.ruleForm.className,
                'course_id': this.ruleForm.courses,
                'name': this.ruleForm.coursesName,
                'type': 4,
                'people_num': 0,
                'long_time': this.ruleForm.kcTime,
                'coach_id': this.ruleForm.coachs,
                'colors': this.ruleForm.color,
                'classroom_id': this.ruleForm.classrooms,
                'contact_classroom': contact_classroom,
                'people_setting': this.ruleForm.enrollment,
                'people_restrict': 1,
                'starts_people': 0,
                'times_setting': 1,
                'reservation_deadline': 0,
                'class_date': this.editName.dateName,
                'class_hour': this.ruleForm.shiTime,
                'class_min': this.ruleForm.fenTime,
                'stateTime': this.ruleForm.stateTime,
                'endTime': this.ruleForm.endTime,
                'days': this.ruleForm.days
                // 'id': this.editData.id,
              }
						}
            console.log(popem);
						this.addVisible = false
						this.editVisible = false
						// this.getList()
						courseshoolAddEdit(popem).then(response => {
							this.addVisible = false
							this.editVisible = false
							this.getList()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息');
						return false;
					}
				});
			},
			shuaVisibleClick() {
				this.addVisible = false
			},
			surfaceAdd(item) {
				this.addTime = item
				this.addVisible = true
        this.getCourse()
        this.getClassList()
			},
      getClassList(){
        getListsAll().then(response => {
        	const {
        		data
        	} = response
        	this.classList = data
        }).catch(error => {
        	console.log(error)
        })
      },
			timeChange(e) {
				if (e === 1) {
					this.timeIndex -= 1
				} else if (e === 0) {
					this.timeIndex = 0
				} else {
					this.timeIndex += 1
				}
				this.timeCreated()
			},
			timeCreated() {
				var date = new Date()
				var day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				this.todayTime = date.setHours(0, 0, 0, 0)
				// 本周一的日期
				date.setDate(date.getDate() + this.timeIndex * 7 - date.getDay() + 1)
				this.oneTime = {
					date: date.setHours(0, 0, 0, 0),
					time: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
						.getDate() : '0' + date.getDate())
				}
				this.timeList = [{
					name: day[date.getDay()],
					date: this.oneTime.date,
					dateName: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
						.getDate() : '0' + date.getDate()),
					time: (date.getMonth() + 1) + '.' + (date.getDate() >= 10 ? date.getDate() : '0' + date
						.getDate())
				}]
				for (var i = 1; i <= 6; i++) {
					// 本周日的日期
					date.setDate(date.getDate() + 1)
					this.timeList.push({
						name: day[date.getDay()],
						date: date.setHours(0, 0, 0, 0),
						dateName: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ?
							date
							.getDate() : '0' + date.getDate()),
						time: (date.getMonth() + 1) + '.' + (date.getDate() >= 10 ? date.getDate() : '0' + date
							.getDate())
					})
					if (i === 6) {
						this.sevenTime = {
							date: date.setHours(0, 0, 0, 0),
							time: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
								.getDate() : '0' + date.getDate())
						}
					}
				}
				console.log(this.todayTime)
				console.log(this.timeList)
				this.getList()
			},
			skinClick(index) {
				if (this.skin !== index) {
					this.skin = index
					this.getList()
				}
			},
			editClick(item, index) {
				courseshoolDetails({
					'id': item.id
				}).then(response => {
					const {
						data
					} = response
					var day = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					this.editName = this.timeList[index]
					this.editData = data
					this.ruleForm1 = data
					this.editDay = day[index]
					this.edit = 1
					this.editVisible = true
					this.getCourse()
					// this.ruleForm1 = {
					// 	type: data.type,
					// 	courses: data.course_id,
					// 	coachs: data.coach_id,
					// 	fee: data.hour_subsidy,
					// 	galleryful: data.people_num,
					// 	kcTime: data.long_time,
					// 	classrooms: data.classroom_id,
					// 	shiTime: data.class_hour,
					// 	fenTime: data.class_min,
					// 	relevance: data.contact_classroom.split(",").map(Number),
					// 	color: data.colors,
					// 	difficulty: data.dif_star,
					// 	enrollment: data.people_setting,
					// 	curriculumFollow: data.times_setting,
					// 	mode: data.reservation_method,
					// 	time: data.lead_time,
					// 	astrict1: data.lead_time === 1 ? data.front_day : 0,
					// 	startShi: data.lead_time === 1 ? data.hour : 0,
					// 	startFen: data.lead_time === 1 ? data.min : 0,
					// 	endShi: data.lead_time === 1 ? data.hour2 : 0,
					// 	endFen: data.lead_time === 1 ? data.min2 : 0,
					// 	astrict2: data.lead_time === 2 ? data.front_day : 0,
					// 	startShi1: data.lead_time === 2 ? data.hour : 0,
					// 	startFen1: data.lead_time === 2 ? data.hour : 0,
					// 	fenTime1: data.last_min,
					// 	fenTime2: data.reservation_deadline,
					// 	restrict: Number(data.people_restrict),
					// 	restrictPeople: data.starts_people,
					// 	restrictTime: data.before_cancel,
					// 	update: 1,
					// 	brief: data.brief
					// }
					if (this.ruleForm1.brief) {
						setTimeout(() => {
							var divID1 = document.getElementById("richId1");
							divID1.innerHTML = this.ruleForm1.brief
						}, 30);
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getDdel() {
				this.$confirm('确定删除吗？此操作不可恢复。若课程有预约，删除后会自动取消所有预约，记得及时通知会员。', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					getDdels({
						'id': this.editData.id
					}).then(response => {
						const {
							data
						} = response
						this.addVisible = false
						this.editVisible = false
						this.getList()
					}).catch(error => {
						console.log(error)
					})
				})
			},
			editTwo() {
				this.edit = 2
			},
			getList() {
				getCourseshoolList({
					'startday': this.oneTime.time,
					'endday': this.sevenTime.time,
          'type': 4
				}).then(response => {
					const {
						data
					} = response
					this.list = data
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style>
	.monitor-yt-popover1 {
		padding: 0;
		border-color: #84878d;
	}

	.monitor-yt-popover1 .popper__arrow::after {
		border-bottom-color: #84878d !important;
	}

	.bot {
		padding: 0;
		margin-top: 2px !important;
	}

	.bot .popper__arrow {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.change-skin {
		width: 72px;
		height: 29px;
		background: url('https://www.jianyigongxiang.com/public/membercard/skin-change.png') no-repeat left bottom;
		overflow: hidden;
		cursor: pointer;
	}

	.change-skin span {
		float: left;
		width: 36px;
		height: 29px;
	}

	.change-skin.curr {
		background-position: left top;
	}

	.group1 ::v-deep .el-checkbox {
		margin-right: 10px;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__label {
		color: #000 !important;
	}

	.xuanze {
		-moz-user-select: none;
		/*火狐*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.syllabus-content-data {
		table-layout: fixed;
	}

	.syllabus-content-data th {
		height: 53px;
		border: 1px solid #d9d9d9;
		font-weight: 400;
	}

	.syllabus-content-data td {
		border: 1px solid #d9d9d9;
		vertical-align: top;
	}

	.syllabus-content-data2 th,
	.syllabus-content-data2 td {
		border: 1px solid #494949;
	}

	.syllabus-content-data .empty-cell {
		color: #4f4f4f;
	}

	.syllabus-thead-cell {
		position: relative;
		padding: 6px 12px;
		text-align: left;
	}

	.syllabus-thead-cell .course-add {
		position: absolute;
		right: 0;
		top: 0;
		width: 26px;
		height: 26px;
	}

	td,
	th {
		padding: 0;
	}

	.syllabus-content-data .time-group-text-box {
		vertical-align: middle;
	}

	.syllabus-list-course {
		overflow: hidden;
	}

	.active {
		position: relative;
		min-height: 105px;
		padding: 6px 12px;
		line-height: 1.5;
		cursor: pointer;
	}

	.syllabus-list-course .course-color {
		position: absolute;
		width: 14px;
		height: 25px;
		right: 10px;
		top: 0;
	}

	.syllabus-list-course .course-color .arrow {
		position: absolute;
		width: 0;
		height: 0;
		left: 0;
		bottom: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 6px solid #fff;
	}

	.quality-badge {
		position: absolute;
		right: 30px;
		top: 0;
		width: 19px;
		height: 25px;
		background: url('../../icons/png/quality.png') no-repeat center center;
	}

	.stop-ribbon {
		text-align: center;
		width: 100px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		top: 7px;
		left: -28px;
		z-index: 1;
		color: #fff;
		overflow: hidden;
		background: rgba(0, 0, 0, .4);
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.sel ::v-deep .el-input--medium .el-input__inner {
		padding: 0 20px 0 10px;
	}

	.item-l {
		background: #f2f2f2;
	}

	.item-p {
		padding: 0 15px;
	}

	.item-w {
		width: 433px;
	}

	.item-bor {
		border-right: 2px solid #fff;
	}

	.dialog-tips {
		height: 32px;
		line-height: 32px;
		background: #fff 8;
		padding: 0 15px;
		margin-top: 30px;
		margin-bottom: 10px;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}

	.col {
		width: 36px;
		height: 36px;
		margin: 0 4px 3px 0;
	}

	.titl {
		height: 22px;
		color: #787878;
	}

	.label {
		width: 200px;
	}

	.cen ::v-deep .el-input__inner {
		text-align: center;
	}

	::v-deep .el-input--medium .el-input__inner {
		height: 34px;
		line-height: 34px;
	}

	.syllabus-introduce {
		background-color: #f6f6f6;
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 8px;
		max-height: 300px;
		overflow-y: scroll;
	}

	.class-desc {
		width: 785px;
		height: 230px;
		border: 1px solid #d9d9d9;
		padding: 5px;
		line-height: 1.5;
	}

	.rich-insert {
		width: 100%;
		height: 30px;
		padding: 2px 5px;
		position: relative;
		vertical-align: text-top;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.rich-row {
		width: 100%;
		height: calc(100% - 31px);
		border: 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 5px;
		margin-top: 1px;
		outline: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	::v-deep .el-upload:focus {
		color: #000 !important;
	}

	::v-deep .el-upload-list {
		display: none;
	}

	.del-list {
		height: 32px;
		line-height: 32px;
		padding: 0 10px;
		cursor: pointer;
	}

	.del-list:hover {
		background: #6b7cdd;
		color: #fff;
	}

	.copy-item:hover {
		background: #6b7cdd;
		color: #ffffff;
	}
</style>
